<template>
    <div class="Menu-container">
        <div class="tabs">
            <input type="radio" name="tabsMenu" checked> 
            <input type="radio" name="tabsMenu">
            <input type="radio" name="tabsMenu">
            <input type="radio" name="tabsMenu">
            <input type="radio" name="tabsMenu">
            <!--设置个button分区，实现cdn提供的各种图标-->
            <div class="buttons">
                <label for="analysis">
                   <SvgIconG name="analysis" class="icon"></SvgIconG>
                </label>
                <label for="data">
                    <SvgIconG name="data" class="icon"></SvgIconG>
                </label>
                <label for="ranking">
                    <SvgIconG name="ranking" class="icon"></SvgIconG>
                </label>
                <label for="problem">
                    <SvgIconG name="problem" class="icon"></SvgIconG>
                </label>
                <label for="accelerate">
                    <SvgIconG name="accelerate" class="icon"></SvgIconG>
                </label>
                <!--实现下划线-->
                <div class="underline"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>

</script>

<style scoped lang="scss">
.Menu-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; //设置最小高度为100vh

    .tabs {

        input {
            visibility: hidden; //设置单选框可见性
            display: none;

        }

        input:nth-child(1):checked~.buttons label:nth-child(1),
        input:nth-child(2):checked~.buttons label:nth-child(2),
        input:nth-child(3):checked~.buttons label:nth-child(3),
        input:nth-child(4):checked~.buttons label:nth-child(4),
        input:nth-child(5):checked~.buttons label:nth-child(5) {
            /*设置透明度为1*/
            opacity: 1;
            color: #fff;
            /*设置滤镜效果，用drop-shadow设置增加阴影。0 0 10px 白色表示阴影格式*/
            filter: drop-shadow(0 0 15px #fff) drop-shadow(0 0 30px #fff);
        }

        .buttons {
            display: flex;
            align-items: center;
            width: 30rem;
            height: 0.4rem;
            gap: 4rem; //间距
            padding: 3rem 2rem;
            background: #4c6880;
            overflow: hidden;
            border-radius: 1.6rem;
            position: relative;


            label {
                width: 20%;
                /*设置图标样式，增加1px白色的边框*/
                -webkit-text-stroke: 3rem #fff;
                /*设置颜色为transparent 透明*/
                color: transparent;
                /*设置透明度为0.5*/
                opacity: 0.5;
                cursor: pointer;
                /*设置过渡效果，0.5秒*/
                transition: 0.5s;

                .icon {
                    width: 100% !important;
                    height: 100% !important
                }
            }

            label:hover {
                /*设置透明度为1*/
                opacity: 1;
                /*设置滤镜效果，用drop-shadow设置增加阴影。0 0 10rem 白色表示阴影格式*/
                filter: drop-shadow(0 0 1rem #fff) drop-shadow(0 0 1rem #fff);
            }

            .underline {
                /*设置定位样式，相对定位*/
                position: absolute;
                /*距离左边的距离为0*/
                left: 0;
                /*距离底部的距离为0*/
                bottom: 0;
                /*设置宽度为20%*/
                width: 20%;
                /*设置高度为5px*/
                height: 5px;
                /*设置过渡效果，0.5秒*/
                transition: 0.5s;
            }

            /*设置下划线的样式，用before和aflter创建伪元素，通过content属性添加修饰性内容*/
            /*在每个underline的前面添加一个伪元素*/
            .underline::before {
                /*修饰内容设置为空*/
                content: '';
                /*设置定位样式，绝对定位*/
                position: absolute;
                /*距离左边50%*/
                left: 50%;
                /*设置变形样式，平移X轴-50%*/
                transform: translateX(-50%);
                /*设置宽度为40px*/
                width: 40px;
                /*设置高度为100%*/
                height: 100%;
                /*设置背景颜色白色*/
                background-color: #fff;
                /*设置边框圆角 4px*/
                border-radius: 4px;
                /*设置滤镜效果，用drop-shadow设置增加阴影。0 0 10px 白色表示阴影格式*/
                filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff) drop-shadow(0 0 30px #fff) drop-shadow(0 0 50px #fff);
            }

            /*设置下划线的样式，用before和aflter创建伪元素，通过content属性添加修饰性内容*/
            /*在每个underline的前面添加一个伪元素*/
            .underline::after {
                /*修饰内容设置为空*/
                content: '';
                /*设置定位样式，绝对定位*/
                position: absolute;
                /*距离左边50%*/
                left: 50%;
                /*设置变形样式，平移X轴-50%*/
                transform: translateX(-50%);
                /*设置宽度为40px*/
                width: 40px;
                /*设置高度为100%*/
                height: 100%;
                /*设置背景颜色白色*/
                background-color: #fff;
                /*设置边框圆角 4px*/
                border-radius: 4px;
                /*设置滤镜效果，用drop-shadow设置增加阴影。0 0 10px 白色表示阴影格式*/
                filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 20px #fff) drop-shadow(0 0 30px #fff) drop-shadow(0 0 50px #fff) blur(5px);
            }

            /*以下为通过设置距离左边的距离，来控制下划线在选择不同按钮时的位置*/

        }
    }

    .tabs input:nth-child(1):checked~.buttons .underline {
        left: 0;
    }

    .tabs input:nth-child(2):checked~.buttons .underline {
        left: 20%;
    }

    .tabs input:nth-child(3):checked~.buttons .underline {
        left: 40%;
    }

    .tabs input:nth-child(4):checked~.buttons .underline {
        left: 60%;
    }

    .tabs input:nth-child(5):checked~.buttons .underline {
        left: 80%;

    }
}
</style>